<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Demo1</title>

  <script src="lib/gsap/TweenMax.min.js"></script>
  <script src="lib/gsap/TimelineMax.min.js"></script>
  <script src="lib/scrollmagic/ScrollMagic.min.js"></script>
  <script src="lib/scrollmagic/plugins/animation.gsap.min.js"></script>
  <script src="lib/scrollmagic/plugins/debug.addIndicators.min.js"></script>
  <link rel="stylesheet" href="assets/demo1.css">
</head>
<body>

<div class="fvh section1">
  <div class="bg"></div>
  <div class="fg"></div>
</div>


<div class="fvh section2">
  <h1>Section 2</h1>

  <div class="texts-wrap">
    <p>独立寒秋，湘江北去，橘子洲头。</p>
    <p>看万山红遍，层林尽染；漫江碧透，百舸争流。</p>
    <p>鹰击长空，鱼翔浅底，万类霜天竞自由。</p>
    <p>怅寥廓，问苍茫大地，谁主沉浮？</p>
    <p>携来百侣曾游，忆往昔峥嵘岁月稠。</p>
    <p>恰同学少年，风华正茂；书生意气，挥斥方遒。</p>
    <p>指点江山，激扬文字，粪土当年万户侯。</p>
    <p>曾记否，到中流击水，浪遏飞舟？</p>
  </div>

</div>
<div class="fvh section3"></div>
<div class="fvh section4"></div>
<div class="fvh section5"></div>

<script>
  var controller = new ScrollMagic.Controller();

  var sense1Timeline = new TimelineMax()
    .to('.section1 .fg', 1, {opacity: 0.5})

  var sense1Duration = 300
  var sense1 = new ScrollMagic.Scene({
    triggerElement: '.section1',
    triggerHook: 0,
    duration: sense1Duration + '%'
  }).setPin('.section1', {pushFollowers: false})
    .addIndicators('sense1')
    .addTo(controller);

  var sense1Fg = new ScrollMagic.Scene({
    triggerElement: '.section1',
    triggerHook: 0,
    duration: '100%'
  })
    .setTween(sense1Timeline)
    .addTo(controller);

  var sense2 = new ScrollMagic.Scene({
    triggerElement: '.section2',
    triggerHook: 0,
    duration: (sense1Duration - 100) + '%'
  })
    .setPin('.section2', {pushFollowers: false})
    .addIndicators('sense2')
    .addTo(controller)

  !function () {
    var items = document.querySelector('.section2 .texts-wrap').children
    items = Array.from(items)

    new TimelineMax().set(items.slice(1), {yPercent: '50%', autoAlpha: 0})

    var itemsTimeline = new TimelineMax()

    items.forEach((v, i) => {
      itemsTimeline
        .to(v, 0.9, {yPercent: 0, autoAlpha: 1, ease: Power4.easeOut})
        .to(v, 1.1, {})

      if (i !== items.length - 1) {
        itemsTimeline.to(v, 1 / 2, {
          yPercent: '-50%', autoAlpha: 0, ease: Power2.easeInOut
        })
      }


      var sense2Content = new ScrollMagic.Scene({
        triggerElement: '.section2',
        triggerHook: 0,
        duration: (sense1Duration - 100) + '%'
      })
        .setTween(itemsTimeline)
        .addIndicators('sense2Content')
        .addTo(controller)
    })
  }()

</script>

</body>
</html>
